<template>
  <div class="h-screen">
    <NLayout class="h-full" content-class="h-auto flex flex-col">
      <NLayoutHeader class="h-15">
        <div class="h-full bg-blue px-4 flex flex items-center justify-between">
          <div class="h-full flex items-center gap-4">
            <img class="h-[80%]" src="/logo.png" alt="" />
            <p class="text-xl font-bold">商银通后台管理系统</p>
          </div>
          <p class="text-xl font-bold">{{ userName }}</p>
        </div>
      </NLayoutHeader>
      <NLayout class="flex-1" has-sider>
        <NLayoutSider collapse-mode="transform" show-trigger="arrow-circle" bordered :width="240">
          <NMenu v-model:value="activePage" :options="options"> </NMenu>
        </NLayoutSider>
        <NLayoutContent>
          <NTabs class="w-full h-full min-h-0 overflow-hidden" type="card" closable v-model:value="activePage">
            <NTabPane
              class="w-full h-full min-h-0 overflow-hidden !pt-0 !pb-4"
              v-for="item in pageList"
              :name="item.label"
              :key="item.label"
              :tab="item.label"
            >
              <component :is="item.component" />
            </NTabPane>
          </NTabs>
        </NLayoutContent>
      </NLayout>
    </NLayout>
  </div>
</template>

<script setup lang="ts" name="">
import {
  NLayout,
  NLayoutSider,
  NLayoutContent,
  NLayoutHeader,
  NMenu,
  NIcon,
  NTabs,
  NTabPane,
} from 'naive-ui'
import { storeToRefs } from 'pinia'
import { usePageConfig } from '@/stores/usePageConfig'
import { computed, h, nextTick, watch, type Component } from 'vue'
defineOptions({ name: 'HomeView' })
const { pageConfig, pageList, activePage } = storeToRefs(usePageConfig())
const userName = localStorage.getItem('user')
function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) })
}
const options = computed(() => {
  return pageConfig.value.map((item) => {
    return {
      label: item.label,
      key: item.label,
      icon: renderIcon(item.icon),
    }
  })
})

watch(activePage, (value) => {
  console.log(value)
  for (const key in pageConfig.value) {
    if (pageConfig.value[key].label === value) {
      console.log(pageConfig.value[key])
      pageList.value[value] = pageConfig.value[key]
      nextTick(() => {})
    }
  }
})
</script>

<style scoped></style>
